<template>
  <div class="apply">
    <nav class="common-nav mb30">
      <h2
        class="common-nav__title"
        :class="index === activeIndex ? 'tab_active' : ''"
        @click="switchNav(item, index)"
        v-for="(item, index) in navList"
        :key="index"
      >
        {{ item.name }}
      </h2>
    </nav>
    <main class="apply-contanier">
      <router-view></router-view>
    </main>
  </div>
</template>

<script>
export default {
  name: 'disburse',
  data() {
    return {
      // navList: [
      //   { name: '初审', pathName: 'DisbursePreliminary' },
      //   { name: '复审', pathName: 'DisburseAgain' },
      // ],
      activeIndex: 0,
    }
  },
  computed: {
    navList() {
      let firstNav = this.$checkAccess('MENU_DISBURSE_FIRST_TRIAL')
        ? { name: '初审', pathName: 'DisbursePreliminary' }
        : ''
      let secondNav = this.$checkAccess('MENU_DISBURSE_AGAIN_TRIAL') ? { name: '复审', pathName: 'DisburseAgain' } : ''
      let array = [firstNav, secondNav].filter(item => item !== '')
      return array
    },
  },
  methods: {
    switchNav(item, index) {
      if (this.activeIndex === index) return
      this.activeIndex = index
      this.$router.push({ name: item.pathName })
    },
    init() {
      this.activeIndex = this.navList.findIndex(item => item.pathName === this.$route.name)
      if (this.activeIndex === -1) {
        this.activeIndex = 0
        this.$router.push({ name: this.navList[this.activeIndex].pathName })
      }
    },
  },
  watch: {
    '$route.name': function () {
      return this.init()
    },
  },
  mounted() {
    this.init()
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
